<template>
	<div id='eventMan' v-loading.body='loading' element-loading-text="拼命加载中">
		<!-- 标题区 -->
		<div class="title">
			事件管理
		</div>
			<!-- 统计区,表格区 -->
		<div class="StaAreatable">
			<div class="StaArea">
				<!-- style="grid-template-columns: calc((100% - 20px) / 2) calc((calc((100% - 20px) / 2) - 20px) / 2) calc((calc((100% - 20px) / 2) - 20px) / 2);" -->
				<div class="Areaitem" style="min-width:580px">
					<div class="count">
						{{eventnum}}
					</div>
					<div class="legend">
						攻击事件数量
					</div>
					<div class="item">
						<span class="attacknum"></span>
						<span>上报攻击事件数</span>
					</div>
					<div id='attackTrTrend' :style="{width: '100%', height: '60px'}">
					</div>
				</div>
				<div class="Areaitem" style="min-width:350px">
					<div class="itemtitle">
						攻击事件威胁级别分布
					</div>
					<div id='threatLevel' :style="{width: '350px', height: '115px'}"></div>
				</div>
				<div class="Areaitem" style="min-width:350px">
					<div class="itemtitle" >
						攻击事件处置状态分布
					</div>
					<div id='disposalStatus' :style="{width: '350px', height: '115px'}"></div>
				</div>
			</div>
			<div class="eventtable">
				<div class="title">
					事件管理列表
				</div>
				<div style="padding: 10px 20px 0 20px;height: 40px;">
					<div style="float:right">
						<at-search v-model='Query' placeholder="请输入事件名称、受害单位、受害系统、受害资产" type="text" project='mh' icon="search" @keyup.enter.native='handleIconClick' :on-icon-click="handleIconClick"/>
					</div>
				</div>
				<at-table @row-click='RowClick' style="width:100%;padding:0 20px" :data="tableDate" @sort-change = "sortChange" @filter-change = "filterChange" :show-header="true" :border="false">
					<at-table-column prop="event_name" show-overflow-tooltip label="事件名称" min-width="150">
					</at-table-column>
					<at-table-column prop="victim_unit" label="受害单位" min-width="120">
					</at-table-column>
					<at-table-column show-overflow-tooltip prop="info_sys_name" label="受害系统" min-width="100">
					</at-table-column>
					<at-table-column show-overflow-tooltip prop="sys_node_name" label="受害资产" min-width="120">
						<template slot-scope="scope">
							<span v-html="subStr(scope.row.sys_node_name)"></span>
						</template>
					</at-table-column>
					<at-table-column prop="risk_level" label="威胁级别" min-width="80" :filters="filtersLevel" column-key='arisk_level'>
						<template slot-scope="scope">
							<span :class="['risklevel',scope.row.risk_level == '低 危' ? 'LowRisk' : scope.row.risk_level == '中 危' ? 'MiddleRisk' : scope.row.risk_level == '高 危' ? 'HighRisk' : 'SeriousRisk']">
									{{scope.row.risk_level}}
							</span>
						</template>
					</at-table-column>
					<at-table-column prop="handle_status" label="处置状态" :filters="filtersStatus" column-key='ahandle_status' min-width="100">
						<template slot-scope="scope">
							<span v-html="scope.row.handle_status=='fix'?'已修复':scope.row.handle_status=='unfix'?'未修复':scope.row.handle_status=='fixing'?'修复中':'成功防御'">
							</span>
						</template>
					</at-table-column>
					<at-table-column prop="unit" show-overflow-tooltip label="上报单位" min-width="160">
					</at-table-column>	
					<at-table-column prop="start_time" label="首次攻击时间" min-width="140" sortable="custom">
					</at-table-column>
					<at-table-column prop="new_time" label="最近攻击时间" min-width="140" sortable="custom">
					</at-table-column>			
				</at-table>
				<Pagination style="margin-bottom:20px;margin-top:20px;text-align: center"
					:currentPage="tableparpam.pagination.current" :total="total"
					:pageSizes="pageSizes" :pageSize="tableparpam.pagination.pageSize"
					layout='total, sizes, prev, pager, next, jumper'
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange">
				</Pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'eventManagement',
	  data () {
	    return {
	      Query: '',
	      pageSizes: [20, 40, 60, 80],
	      filtersLevel: [
	        { text: '低危', value: '低 危' },
	        { text: '中危', value: '中 危' },
	        { text: '高危', value: '高 危' },
	        { text: '严重', value: '严 重' }
	      ],
	      filtersStatus: [
	        { text: '已修复', value: 'fix' },
	        { text: '未修复', value: 'unfix' },
	        { text: '修复中', value: 'fixing' },
	        { text: '成功防御', value: 'defense' }
	      ]
	    }
	  },
	  mounted () {
	    this.$store.dispatch('/event/statistics')
	    this.$store.dispatch('/event/eventtable', { type: 'all' })
	    // 窗口自适应
	    // let that = this
	    window.addEventListener('resize', this.temp)
	  },
	  computed: {
	    ...mapState({
	      // loading加载
	      loading: state => state.eventManagement.loading,
	      // 列表数据
	      tableDate: state => state.eventManagement.tableDate,
	      // 页面总数
	      total: state => state.eventManagement.total,
	      // 列表参数
	      tableparpam: state => state.eventManagement.tableparams,
	      // 监控containers大小
	      changeSizeValue: state => state.system.changeSizeValue,
	      eventnum: state => state.eventManagement.eventnum
	    })
	  },
	  watch: {
	    // 监控窗口变化
    changeSizeValue () {
	      if (this.$route.path === '/monitor/event') {
	        this.adaptive()
	      }
	    }
  },
	  methods: {
	    subStr (str) {
	      if (str.charAt(str.length - 1) === ',') {
	        return str.substring(0, str.length - 1)
	      }
	      return str
	    },
	    temp () {
	      if (this.$route.path === '/monitor/event') {
	        this.$nextTick(() => {
	          this.adaptive()
	        })
	      }
	    },
	    // echarts图表自适应
	    adaptive () {
	      this.$echarts.init(document.getElementById('threatLevel')).resize()
	      this.$echarts.init(document.getElementById('attackTrTrend')).resize()
	      this.$echarts.init(document.getElementById('disposalStatus')).resize()
	    },
	    // 跳转详情
	    RowClick (row) {
	      this.$router.push({ 'name': '事件管理详情', 'query': { row: row.event_id } })
	    },
	    // 排序
	    sortChange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'start_time'
        order = 'descending'
      }
      this.$store.dispatch('/event/eventtable', {
	        key: prop,
	        value: order.slice(0, -3),
	        type: 'sort'
      })
    },
	    // 过滤
	    filterChange (filters) {
	      for (let k in filters) {
        this.$store.dispatch('/event/eventtable', { r: k, v: filters[k], type: 'filter' })
      }
	    },
	    // 搜索
	    handleIconClick () {
	      this.$store.dispatch('/event/eventtable', { val: this.Query, type: 'search' })
	    },
	    // 分页
	    handleCurrentChange (val) {
	      this.$store.dispatch('/event/eventtable', { val: val, type: 'pagechange' })
	    },
	    // pagesize
	    handleSizeChange (val) {
	      this.$store.dispatch('/event/eventtable', { val: val, type: 'sizechange' })
	    }
	  }
	}
</script>
<style>
	#eventMan {
		background: #fff;
	}
	#eventMan .title {
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		color: #5c6781;
		font-weight: 600
	}
	#eventMan .StaAreatable {
		padding: 20px;
	}
	#eventMan .StaAreatable .StaArea {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 150px;
		grid-column-gap: 20px;
	}
	#eventMan .StaAreatable .StaArea .Areaitem {
		border: 1px solid #eee;
		border-radius: 2px;
		position: relative;
	}
	#eventMan .StaAreatable .StaArea .Areaitem .count {
		height: 36px;
    line-height: 36px;
    margin: 20px 0 13px;
    font-size: 36px;
    font-weight: 700;
    padding: 0 20px;
    color: #1f92ef;
	}
	#eventMan .StaAreatable .StaArea .Areaitem .legend {
		padding: 0px 0 2px 20px;
		font-size: 12px;
		color: #5c6781;
		font-weight: 600;
	}
	#eventMan .StaAreatable .StaArea .Areaitem .itemtitle {
		width: 100%;
    height: 12px;
    line-height: 12px;
    padding: 0 20px;
    margin: 15px 0;
    font-size: 12px;
    font-weight: 700;
    color: #5c6781;
	}
	.Areaitem .item {
		position: absolute;
    top: 30px;
    right: 30px;
	}
	.Areaitem .item .attacknum{
  	display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1f92ef;
    background-color: #1f92ef;
    border-radius: 50%;
	}
	.eventtable {
		border: 1px solid #eee;
		margin-top: 20px; 
	}
	.eventtable .title {
		border-bottom: 1px solid #eee;
		height: 50px;
		line-height: 50px;
		color: #5c6781;
		font-weight: 800;
		padding-left: 20px;
	}
	.eventtable .at-table__body-wrapper{
  	overflow: hidden;
	}
</style>
<style scoped>
@import './style/tag.css';
</style>